<template>
    <el-popover placement="bottom-end" :width="400" trigger="click" popper-class="popover-class" 
        @after-leave="popoverHide" @before-enter="onShow">
        <template #reference>
            <button :class="['open-btn sa-flex sa-row-center',{'open-btn-active':state.show}]">
                签约状态
                <div class="open-btn-icon"></div>
            </button>
        </template>
        <div class="box sa-flex sa-col-top">
            <div class="" v-for="i in level" :key="i">
                <c-cascader-item :list="state.options[i - 1]" @onTap="tapLevel($event,i)" />
            </div>
        </div>
    </el-popover>
</template>
<script setup>
import { reactive, ref, onMounted ,watch} from 'vue';
import { cloneDeep } from 'lodash';
import opt from './opt.json';
import { getTestArea,getListByPid } from '@/app/shop/admin/screen/api';
import cCascaderItem from './c-cascader-item.vue';
const props = defineProps({
    // list: Array,
    level: {
        type: Number,
        default: 4,
    },
});
const state = reactive({
    list:[],
    show:false,
    options: []
});
watch(()=>state.list,(newVal)=>{
    if(newVal?.length){
        init()
    }
},{
    immediate:true
})

async function tapLevel(item,i) {
    if(item.is){
        state.options[i] = await getListByPidApi(item.id)
        for(let j = i+1 ; j < props.level; j++){
            state.options[j] = []
        }
    }
}
function onShow() {
    state.show = true;
}
function popoverHide() {
    state.show = false;
    init()
}
function init() {
    state.options = []
    for(let j = 0 ; j < props.level; j++){
        state.options.push([]) 
    }
    state.options[0] = cloneDeep(state.list)
}
async function getListByPidApi(id){
    let res = await getListByPid({
        pid:id
    })
    if(res.error == 0){
        return res.data
    }else{
        return []
    }
}
async function getTestAreaApi(){
    let res = await getTestArea()
    if(res.error == 0){
        state.list = res.data
    }
}
onMounted(() => {
    getTestAreaApi()
    // init()
});
</script>
<style lang="scss">
.open-btn{
    border-radius: 2px;
    width: 130px;
    height: 34px;
    border: none;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(180deg, #466E8D 0%, #162636 100%);
    .open-btn-icon {
        margin-left: 6px;
        width: 17px;
        height: 12px;
        background-image: url('/static/images/screen/time-down.png');
        background-size: 100% 100%;
    }
}
.open-btn-active{
    background:  linear-gradient(to bottom, #1F3A6E 0%, #2D5D8D 50%, #306C8F 100%) !important;
}
.popover-class {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    // width: auto !important;
}

.el-popper__arrow {
    display: none;
}

.box {
    transform: translateY(-11px) !important;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    color: var(--sa-title);
    position: relative;
}
</style>